<template>
    <div class="ccui-tab-wrapper">
        <el-button
            size="mini"
            v-for="(v,i) in toggleBtn"
            :key="i"
            :type="isActive === i? 'table-top-active' : 'table-top'"
            @click="toggleClick(v,i)">
            {{ v.label }}
            <span v-show="isActive === i">({{ totalAccount }})</span>
        </el-button>
    </div>
</template>

<script>
/**
 * @param toggleBtn 遍历源
 * @param totalAccount 数量
 * @param isActive 控制默认展示高亮
 * */
export default {
    name: "tabsToggle",
    props: {
        toggleBtn: {
            type: Array,
            default: () => []
        },
        totalAccount: {
            type: Number,
            default: 0
        },
        isActive: {
            type: Number,
            default: 0
        }
    },
    methods: {
        toggleClick(v, i) {
            this.$emit("toggleClick", v, i);
        }
    }
}
</script>

<style scoped>

</style>